<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
// import HelloWorld from './components/HelloWorld.vue'
import Code from './components/Code.vue'
import Pdf from './components/Pdf.vue'
import Canvas from './components/Canvas.vue'
import { onMounted, ref,reactive} from 'vue';
import { Toast } from 'vant';
import { fabric } from 'fabric'

import 'highlight.js/styles/stackoverflow-light.css'
import hljs from 'highlight.js';
import axios from 'axios'


const obj = reactive({
  codes: [],
  pdfs: []
})

const shapes =[
  new fabric.Rect({ centeredRotation:true,centeredScaling:true,
     top:100,angle:30, left:100,fill:"red",height:100,width:200
  }),
  new fabric.Text("ChongQing520",{ centeredRotation:true,centeredScaling:true,
     top:280,angle:0, left:100,fill:"blue",height:100,width:200
  }),
]
const search_url_host = '';
// const search_url_host = 'http://192.168.10.231:8880';

const total = ref(0)
const pdf_page = ref(1)
const loading_pdf = ref(false)
const file_page = ref(1)
const lang = ref("cpp")
const tip_style = ref("")
const tip_style_pad = ref("hidden-pad")
const search_fly = ref("")
const search_fly_pad = ref("hidden-pad")
const showPicker = ref(false);
const value = ref('');
const onSearch = (val:string) => {
   Toast(lang.value);
   let enc_val = encodeURIComponent(val);
   axios.get(search_url_host+'/Search?search='+enc_val+'&lang='+lang.value).then(function (response) {
     let data = response.data;
     console.log(response);
     obj.codes = data.data;
     obj.pdfs = data.pdf;
     console.log(data.pdf);
     file_page.value = 1;
     pdf_page.value = 1;
     total.value = data.total;
  }).catch(function (error) {
    console.log(error);
  });
}
const onClickButton = () => Toast(value.value);

const columns =ref( ['cpp','cppdoc', 'psql', 'rust','go','vim','arm']);

const onConfirm = (value:string, index:number) => {
      Toast(`当前值: ${value}, 当前索引: ${index}`);
      lang.value = value;
      showPicker.value = false;
    };
const onChange = (value:string, index:number) => {
      Toast(`当前值: ${value}, 当前索引: ${index}`);
      lang.value = value;
    };

const onCancel = () => Toast('取消');

onMounted(()=>{
  console.log("all mounted")
  hljs.highlightAll()
  window.addEventListener("scroll",onscroll.bind(this),true);
})

let loading = false

const loadMore = (type:string) => {
   if(loading || total.value == obj.codes.length + obj.pdfs.length){
      return
   }
   loading = true
   let cur_page = pdf_page.value + 1
   if(type=='file') {
     cur_page = file_page.value + 1
   }else{
     loading_pdf.value = true
   }
   let enc_val = encodeURIComponent(value.value);
   axios.get(search_url_host+'/Search?search='+enc_val+'&lang='+lang.value+"&page="+cur_page+'&type='+type).then(function (response) {
     let data = response.data;
     if(type=='file'){
         //@ts-ignore
         obj.codes = obj.codes.concat( data.data);
         file_page.value = cur_page;
     }else{
         //@ts-ignore
         obj.pdfs = obj.pdfs.concat( data.pdf);
         pdf_page.value = cur_page;
         loading_pdf.value = false
     }
     loading = false;
  }).catch(function (error) {
    loading = false;
    console.log(error);
  });
}

function onscroll(e:Event) {
    //@ts-ignore
    if(e.srcElement && e.srcElement.scrollingElement){
      //@ts-ignore
      let elment = e.srcElement.scrollingElement as Element
      if(elment.scrollHeight - elment.scrollTop < window.innerHeight + 50){
        loadMore('file')
      }
      if(elment.scrollTop>80){
        tip_style.value="size-tip fly"
        tip_style_pad.value="show-pad"
      }else{
        tip_style.value=""
        tip_style_pad.value="hidden-pad"
      }
      if(elment.scrollTop>50){
        search_fly.value="fly"
        search_fly_pad.value="show-search-fly"
      }else{
        search_fly.value=""
        search_fly_pad.value="hidden-pad"
      }
    }
}
const show_add = ref(false)
const file_path = ref("")

function addBook(){
   show_add.value=true
}
function doAddPdf(){
  let path  = file_path.value
  let table = lang.value
   let enc_path = encodeURIComponent(path);
   axios.get(search_url_host+'/Search/addpage?path='+enc_path+'&table='+table).then(function (response) {
     console.log(response);
  }).catch(function (error) {
    console.log(error);
  });
}
</script>

<template>

    <div class="lang-and-add">
        <van-icon name="add-o" color="#51bd1c" size="1.5rem" @click="addBook" />
        <van-field
          v-model="lang" is-link readonly label="语言" placeholder="选择语言"
          @click="showPicker = true"
        />
    </div>
    <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker
          title="选择语言"
          :columns="columns"  @confirm="onConfirm"
          @cancel="onCancel"  @change="onChange"
        />
    </van-popup>
    <van-search :class="search_fly"
      v-model="value"
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="onClickButton">搜索</div>
      </template>
    </van-search>

    <div  :class="search_fly_pad"></div>

    <div v-if="total > 0" :class="tip_style">{{obj.codes.length+obj.pdfs.length}}/{{total}}</div>
    <div v-if="total > 0" :class="tip_style_pad"></div>


    <my-scroll @scroll="onscroll">
      <Canvas :msg="shapes"/>
      <Pdf :table="lang" :datas="obj.pdfs"/>
      <div v-if="obj.pdfs.length>0" class="load-more" @click="loadMore('pdf')">
          Load More
          <van-button loading type="success" v-if="loading_pdf" loading-text="..." />
      </div>
      <div v-for="row in obj.codes">
        <Code :data="row"/>
      </div>
      <div v-if="obj.pdfs.length>0" class="load-more" @click="loadMore('file')">Load More</div>
    </my-scroll>
    <!--HelloWorld msg="Vite + Vue" /-->
    <van-dialog v-model:show="show_add" title="添加文件" @confirm="doAddPdf" show-cancel-button>
       <van-field v-model="file_path" label="路径" placeholder="请输入pdf路径" />
    </van-dialog>
</template>

<style scoped>
.load-more{
   font-size:12px;
   margin:8px;
}
.lang-and-add{
  display: flex;
  align-items: center;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
pre code.hljs {
  font-size:12px;
}
.size-tip.fly{
  position: fixed;
  top: 80px;
  right: 20px;
  background: antiquewhite;
  padding: 10px;
  border-radius: 20px;
  z-index: 12;
}
.hidden-pad{
    display:none;
}
.show-pad{
   display:block;
   height:24px;
}
.van-search.fly{
   position: fixed;
   width: 320px;
   z-index: 20;
   top: 20px;
}
.show_search_fly{
   display:block;
   height:78px;
}
</style>
